import React from 'react';
import { dataList } from './helper';
import styles from './index.less';

export default ({ dataSource }) => {
  const fmtNum = (v) => {
    if (!v) return 0;
    return Math.round(v);
  };
  return (
    <div className={styles.container}>
      {dataList.map((item, idx) => {
        // 完成度
        const { values, lables, color, unit } = item;
        const startVal = dataSource?.daTangLongTermBody?.[values[0]] || 0;
        const endVal = dataSource?.daTangLongTermBody?.[values[1]] || 0;
        const degree = +Math.round((startVal / endVal) * 100).toFixed(1);
        return (
          <div className={styles.slider} key={idx}>
            <div className={styles.labels}>
              <div className={styles.min}>
                <div className={styles.label} style={{ color: `rgba(${color},1)` }}>
                  {lables[0]}
                </div>
                <div className={styles.value}>
                  {fmtNum(startVal)}
                  <div className={styles.unit}>{unit}</div>
                </div>
              </div>
              <div className={styles.max}>
                <div className={styles.label} style={{ color: `rgba(${color},1)` }}>
                  {lables[1]}
                </div>
                <div className={styles.value}>
                  {fmtNum(endVal)}
                  <div className={styles.unit}>{unit}</div>
                </div>
              </div>
            </div>
            <div className={styles.bar}>
              <div
                className={styles.barPer}
                style={{
                  width: `${degree > 100 ? 100 : degree < 0 ? 0 : degree}%`,
                  background: `linear-gradient(-90deg, rgba(${color},1) 0%, rgba(${color},0.2) 100%)`,
                }}
              >
                <div className={styles.handle}>
                  <div className={`${styles.per} ${degree < 70 ? styles.r : ''}`}>{degree}%</div>
                </div>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};
